<!--
  create by 李益钢 at 2020-03-10 简单表格通用组件
-->
<template>
  <!-- 多选返回事件 changeRow -->
  <div>
    <!--表格-->
    <el-table
      ref="commonTableRef"
      :data="tData"
      style="width: 100%;position: relative;"
      :row-key="rowKeyFunc"
      class="commonTable"
      border
      highlight-current-row
      :max-height="tHeight"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      @current-change="rowClickMethods"
      @expand-change="expandChangeMethods"
    >
      <el-table-column
        type="expand"
        v-if="$props.isShowExpand"
      >
        <template slot-scope="scope">
          <slot
            name="expandSlot"
            :row="scope.row"
            :arrIndex="scope.$index"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="$props.isSelection"
        :reserve-selection="$props.isReserveSelect"
        type="selection"
        width="55"
      />
      <el-table-column
        v-if="$props.isShowIndex"
        type="index"
        width="50"
        label="序号"
      />
      <!--:show-overflow-tooltip="true"-->
      <el-table-column
        v-for="(item , index) in getCol"
        :key="item.prop + '-' + index + '-' + 'only'"
        :align="item.align?item.align: 'left'"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :sortable="item.sortable?'custom': false"
        :fixed="item.fixed?item.fixed: false"
      >
        <template slot-scope="scope">
          <div v-if="item.filter && item.filter === 'date'">
            {{ scope.row[item.prop] | transformDate }}
          </div>
          <!--          <div v-else-if="item.filter && item.filter === 'times'">-->
          <!--            {{scope.row[item.prop] | transformTimes}}-->
          <!--          </div>-->
          <div v-else-if="item.filter && item.filter === 'percent'">
            {{ scope.row[item.prop] }}%
          </div>
          <!--有值存在-->
          <div v-else-if="item.filter && item.filter === 'keyValue' && scope.row[item.prop] !== undefined && scope.row[item.prop] !== null">
            {{ item.options[scope.row[item.prop]] }}
          </div>
          <div v-else-if="item.isEdit && item.inputType === 'string'">
            <input
              v-model="scope.row[item.prop]"
              type="text"
              style="padding: 3px;border-radius: 4px;border: 1px solid lightgrey;"
              @blur="blurInputValue(item.prop , scope.$index , scope.row[item.prop] , item.validateType , scope.row)"
            >
          </div>
          <!--开关控件-->
          <div v-else-if="item.isEdit && item.inputType === 'switch'">
            <el-switch
              :value="scope.row[item.prop]"
              :active-value="item.switchOpt[0]"
              :inactive-value="item.switchOpt[1]"
              active-color="#13ce66"
              inactive-color="#999999"
              :active-text="item.text && item.text[0]"
              :inactive-text="item.text && item.text[1]"
              @change="updateStatus(item.prop , scope.row , scope.$index , item.switchOpt)"
            />
          </div>
          <!--单选下拉控件-->
          <div v-else-if="item.isEdit && item.inputType === 'select'">
            <el-select
              v-model="scope.row[item.prop]"
              placeholder="请选择"
              @change="refreshView"
            >
              <el-option
                v-for="(im , idx) in item.dataSource"
                :key="idx"
                :label="im.label"
                :value="im.value"
              />
            </el-select>
          </div>
          <!--自定义 slotName 插槽名称-->
          <div v-else-if="item.prop === 'slot'">
            <slot
              :name="item.slotName"
              :row="scope.row"
              :arrIndex="scope.$index"
            />
          </div>
          <div v-else-if="item.popover">
            <el-popover
              placement="top-start"
              trigger="hover"
              :content="scope.row[item.prop]"
            >
              <el-button
                slot="reference"
                :style="{width: item.width + 'px', overflow: 'hidden', textOverflow: 'ellipsis'}"
                type="text"
              >
                {{ scope.row[item.prop] }}
              </el-button>
            </el-popover>
          </div>
          <!--为了有些格式渲染-->
          <div
            v-else-if="item.renderMethods === 'html'"
            :v-html="scope.row[item.prop]"
          />
          <template
            v-else
          >
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column
        v-if="$props.isHasOpera"
        fixed="right"
        :width="parseInt($props.operatingWidth)"
        label="操作"
      >
        <template slot-scope="scope">
          <slot
            name="operate"
            :row="scope.row"
            :arrIndex="scope.$index"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="page-nation"
      :current-page="searchObj.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="searchObj.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// import {FormatDate} from '@/utils/filters'
function formatDate(date, format='YYYY-MM-DD HH:mm:ss') {
  if (!date) {
    return ''
  }

  let d = new Date(date)

  // 年
  if (/YYYY/.test(format)) {
    format = format.replace(/YYYY/, d.getFullYear())
  }
  // 月份
  let month = d.getMonth() + 1
  if (/MM/.test(format)) {
    let monthStr = month < 10 ? '0' + month : month
    format = format.replace(/MM/, monthStr)
  } else if (/M/.test(format)) {
    format = format.replace(/M/, month)
  }
  // 日期
  let dates = d.getDate()
  if (/DD/.test(format)) {
    let dateStr = dates < 10 ? '0' + dates : dates
    format = format.replace(/DD/, dates)
  } else if (/D/.test(format)) {
    format = format.replace(/D/, dates)
  }
  // 小时
  let hours = d.getHours()

  if (/HH/.test(format)) {
    let hoursStr = hours < 10 ? '0' + hours : hours
    format = format.replace(/HH/, hoursStr)
  } else if (/H/.test(format)) {
    format = format.replace(/H/, hours)
  } else if (/hh/.test(format)) {
    let hoursMin = hours > 12 ? hours - 12 : hours
    let hoursStr = hoursMin < 10 ? '0' + hoursMin : hoursMin
    format = format.replace(/hh/, hoursStr)
  } else if (/h/.test(format)) {
    let hoursMin = hours > 12 ? hours - 12 : hours
    format = format.replace(/h/, hoursMin)
  }
  // 分
  let minutes = d.getMinutes()
  if (/mm/.test(format)) {
    let minutesStr = minutes < 10 ? '0' + minutes : minutes
    format = format.replace(/mm/, minutesStr)
  } else if (/m/.test(format)) {
    format = format.replace(/m/, minutes)
  }
  // 秒
  let seconds = d.getSeconds()
  if (/ss/.test(format)) {
    let secondsStr = seconds < 10 ? '0' + seconds : seconds
    format = format.replace(/ss/, secondsStr)
  } else if (/s/.test(format)) {
    format = format.replace(/s/, seconds)
  }
  return format
}
export default {
  name: 'RulesCommonTable',
  filters: {
    transformDate(value) {
      if (value) {
        return formatDate(new Date(value))
      }
      return ''
    },
    // transformTimes(value) {
    //   if (value) {
    //     return FormatDate(new Date(value)).split(' ')[1]
    //   }
    //   return ''
    // }
  },
  props: {
    isShowExpand: {
      type: Boolean,
      default: false
    },
    sortMethods: {
      type: Function,
      default: () => {}
    },
    // 控制操作是否fixed
    operateIsFixed: {
      type: String,
      default: ''
    },
    // 控制操作的长度默认是空
    operatingWidth: {
      type: String || Number,
      default: ''
    },
    // 是否显示序列号
    isShowIndex: {
      type: Boolean,
      default: true
    },
    // 是否展示操作
    isHasOpera: {
      type: Boolean,
      default: true
    },
    // 是否展示跨页全选
    isReserveSelect: {
      type: Boolean,
      default: false
    },
    // 当前第几页
    currentPage: {
      type: Number,
      default: 1
    },
    // 默认发射选中的方法名
    emitSelectionName: {
      type: String,
      default: 'changeRow'
    },
    isSelection: {
      type: Boolean,
      default: false
    },
    tColumnData: {
      type: Array,
      default: () => []
    },
    tData: {
      type: Array,
      default: () => []
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    tHeight: {
      type: Number,
      default: 530
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    remoteApi: {
      type: Function | String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectedCache: [],
      rowKeyFunc: (row) => {
        return `${row[this.rowKey]}`
      },
      dataList: [],
      searchObj: {
        page: 1,
        size: 20
      },
      total: 0
    }
  },
  computed: {
    // 过滤isShow 不展示的值
    getCol() {
      const tmp = []
      this.$props.tColumnData.forEach((v) => {
        if (v.isShow) {
          tmp.push(v)
        }
      })
      return tmp
    }
  },
  watch: {
    // 判断选中中是否还有数据，没有就清空选中状态
    selectedCache() {
      if (this.selectedCache.length === 0) {
        this.$refs.commonTableRef.clearSelection()
      }
    },
    tData(val) {
      this.dataList = val.slice()
    }
  },
  mounted() {
    // 如果有remoteapi 就从接口获取数据
    if(this.remoteApi !== '') {
      this.remoteApi(...this.queryParams).then((res) => {
        console.log('res.data ---', res.data)
      })
    }
    this.$nextTick(() => {
      let calWidth = 0
      this.$props.tColumnData.forEach((v) => {
        calWidth = parseInt(calWidth, 10) + parseInt(v.width, 10)
      })
      if(this.$refs.commonTableRef) {
        const documentWidth = parseInt(this.$refs.commonTableRef.bodyWidth.split('p')[0], 10)
        if (calWidth < documentWidth && document.body.clientWidth > 1366) {
          this.$refs.commonTableRef.$el.style.width = '100%'
        }
      }

      // setTimeout(() => {
      //   this.tableWidthAdaptation()
      // }, 20)
    })
  },
  methods: {
    handleSizeChange(size) {
      this.searchObj.size = size
    },
    handleCurrentChange(page) {
      this.searchObj.page = page
    },
    sortChange(col) {
      this.sortMethods(col)
    },
    columnWidth(value, min = 52, max = 200) {
      value = Number(value) + 12
      if (value < min) {
        return min + 'px'
      } else if (value > max) {
        return max + 'px'
      } else {
        return value + 'px'
      }
    },
    tableWidthAdaptation() {
      const rows = this.$refs.commonTableRef.$el.childNodes[2].childNodes[0].childNodes[1].rows
      const arr = []
      for (let i = 0; i < rows.length; i++) {
        for (let j = 0; j < rows[i].cells.length; j++) {
          const w = rows[i].cells[j].childNodes[0].childNodes[0].offsetWidth
          arr[j] = this.columnWidth(w)
        }
      }
      // 截取数组
      arr.splice(0, 1)
      arr.splice(-1, 1)

      this.$props.tColumnData.forEach((item, key) => {
        item.width = arr[key] ? arr[key] : ''
      })
      this.tData.splice(0, 0)
    },
    clickMethods() {
      console.log('点击事件')
    },
    blurInputValue(filed, index, row, validateType, arr) {
      // 小数点取后两位
      if (validateType === 'int') {
        this.$props.tData[index][filed] = parseInt(this.$props.tData[index][filed], 10)
      } else if (validateType === 'float') {
        this.$props.tData[index][filed] = parseFloat(parseFloat(this.$props.tData[index][filed]).toFixed(2))
      }
      this.$props.tData.splice(0, 0)
      this.$emit('inputBlurCallBack', {
        filed: filed, index: index, value: row, arr: arr
      })
    },
    refreshView() {
      this.tData.splice(0, 0)
    },
    // 重置选中的航
    clearClickRow() {
      this.$refs.commonTableRef.setCurrentRow(null)
    },

    clearSelection() {
      this.$refs.commonTableRef.clearSelection(null)
    },
    updateStatus(col, row, index, opt) {
      const currentData = row[col]
      let updateData = ''
      if (opt.indexOf(currentData) === 0) {
        [updateData] = [opt[1]]
      } else {
        [updateData] = [opt[0]]
      }
      this.$emit('switchUpdate', {
        col: col, data: row, index: index, updateValue: updateData
      })
    },
    handleSelectionChange(val) {
      this.selectedCache = val
      this.$emit(this.$props.emitSelectionName, val)
    },
    rowClickMethods(val) {
      this.$emit('tableRowClickEmit', val)
    },
    expandChangeMethods(val, expanded) {
      this.$emit('expandChangeEmit', {val: val, expanded: expanded})
    }
  }
}
</script>

<style scoped>
  .commonTable /deep/ .el-table__body .cell {
    padding: 0px 8px !important;
  }

  .page-nation{
    margin-top: 15px;
  }
</style>
